<template>
  <div class="itemClassify">
    <!-- 引入公共头部 -->
    <NavBar title="分类" back/>
    <div id="categoryBody" class="category-box">
      <div id="rootList" class="left-wrapper" ref="left">
        <ul id="leftUl" class="category-ul">
          <li v-for="(category, index) in categoryList" :key="index" :class="{'current': categoryIndex == index}" @click="selectCategory(index, $event)">{{category.name}}</li>
        </ul>
      </div>
      <div class="right-wrapper" ref="right">
        <ul id="rightUl">
          <li class="right-ul-li" v-for="(category, index) in categoryList" :key="index">
            <h1 class="title">{{category.name}}</h1>
            <ul class="category-sub-ul" >
              <li v-for="(children, index) in category.children" :key="index">
                <router-link :to="{path: 'item/itemList', query: {categoryId: children.id}}" >
                  <div class="img">
                    <img v-lazy="GLOBAL.baseImagePath + children.imageUrl"/>
                  </div>
                  <span>{{children.name}}</span>
                </router-link>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
    <!-- 引入公共底部 -->
    <tab-bar/>
  </div>
</template>
<script>
import NavBar from '../../components/common/NavBar.vue'
import TabBar from '../../components/common/TabBar.vue'
import BetterScroll from 'better-scroll'
import goodsApi from '../../api/goods'
import { Toast } from 'vant'
export default {
  name: 'itemClassify',
  data () {
    return {
      categoryIndex: 0,
      scrollY: 0,
      clickEvent: false,
      categoryList: [],
      listHeight: []
    }
  },
  components: {
    NavBar,
    TabBar
  },
  computed: {
  },
  created () {
    this.getCategoryList()
  },
  mounted () {
    this.initScroll()
    this.getHeight()
  },
  methods: {
    getCategoryList: function () {
      const _this = this
      goodsApi.getCategoryList().then(function (res) {
        if (res.data.success) {
          _this.categoryList = res.data.re
        } else {
          Toast('获取分类异常')
        }
      })
    },
    initScroll: function () {
      this.lefts = new BetterScroll(this.$refs.left, {
        click: true
      })
      this.rights = new BetterScroll(this.$refs.right, {
        // scrollbar: true,
        click: true,
        probeType: 3
      })
      this.rights.on('scroll', (pos) => {
        this.scrollY = Math.abs(pos.y)
      })
    },
    getHeight: function () {
      let rightI = this.$refs.right.getElementsByClassName('right-ul-li')
      let height = 0
      this.listHeight.push(height)
      for (let i = 0; i < rightI.length; i++) {
        let item = rightI[i]
        height += item.clientHeight
        this.listHeight.push(height)
      }
    },
    selectCategory: function (index, event) {
      this.clickEvent = true
      this.categoryIndex = index
      if (!event._constructed) {
        return false
      } else {
        // this.getCurrentIndex()
        let rightI = this.$refs.right.getElementsByClassName('right-ul-li')
        let el = rightI[index]
        this.rights.scrollToElement(el, 300)
      }
    },
    getCurrentIndex: function () {
      const _this = this
      for (let i = 0; i < this.listHeight.length; i++) {
        let height = this.listHeight[i]
        let height2 = this.listHeight[i + 1]
        if (!height2 || (this.scrollY >= height && this.scrollY < height2)) {
          if (this.clickEvent) {
            _this.categoryIndex = i + 1
          } else {
            _this.categoryIndex = i
          }
        }
      }
      _this.categoryIndex = 0
    }
  }
}
</script>
<style>
  .itemClassify {
    position: absolute;
    height: 100%
  }
  .category-box {
    position: absolute;
    display: flex;
    top: 46px;
    bottom: 46px;
    width: 100%;
    overflow: hidden;
  }

  .left-wrapper {
    width: 95px;
    min-width: 95px;
    background: #fafafa;
    float: left;
   /* overflow-y: auto;*/
    min-height: 100%;
  }

  .left-wrapper .current {
    background: #fff;
    color: #1ABC9C;
  }

  .category-ul {
    width: 95px;
    display: block;
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .category-ul li {
    background: #f8f8f8;
    height: 46px;
    line-height: 46px;
    text-align: center;
    position: relative;
    display: block;
    font-size: 13px;
  }

  .category-ul a:visited {
    text-decoration: none;
  }
  .category-ul a {
    color: #333;
    font-size: 14px;
    display: block;
    width: 100%;
    height: 46px;
    line-height: 46px;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .right-wrapper .title {
    height: 26px;
    line-height: 26px;
    margin: 0;
    padding-left: 10px;
    border-left: 2px solid #dfe3e7;
    font-size: 12px;
    color: #93999f;
    background: #fafafa;
    font-weight: normal;
  }

  .right-wrapper {
    width: 100%;
    /*overflow-y: auto;*/
    height: 100%;
    background: #fff;
  }
  .right-wrapper .category-sub-ul {
    display: inline-block;
    width: 100%;
    margin-top: 5px;
  }
  .right-wrapper .category-sub-ul li {
    width: 30%;
    float: left;
    text-align: center;
    padding: 1.665%;
  }
  .right-wrapper .category-sub-ul .img {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding-bottom: 100%;
  }
  .right-wrapper .category-sub-ul img {
    position: absolute;
    left: 0;
    width: 100%;
  }

  .right-wrapper .category-sub-ul span {
    color: #333;
    font-size: 12px;
    display: block;
    line-height: 22px;
  }

  .right-wrapper .category-sub-ul a {
    display: block;
  }
</style>
